<template>
	<view class="container">
		<view class="flex diygw-autoview diygw-col-24 flex-direction-column autoview-clz">
			<view class="diygw-absolute autoview_0">
				<view class="flex diygw-col-18 search-clz">
					<view class="diygw-search">
						<view class="flex1 align-center flex padding-xs solid radius">
							<text class="diy-icon-search" style="color: "></text>
							<input class="flex1" name="search" type="" v-model="name" placeholder="请输入商品名称" />
						</view>
						<view @click="searchByName" style="color: #333 !important"
							class="diygw-tag margin-left-xs radius-xs"> 搜索 </view>
					</view>
				</view>
			</view>
			<view class="search-filter" @tap="orderbyChange" :class="{'text-theme': hasChoose}">
				<image class="search-filter-image" src="https://www.dtxtkj.com/app/images/filter.png"></image>
			</view>
			<fjj-condition ref='condition' @touchmove.stop :color="color" :list="filterData"
				:defaultValue="defaultValue" @result="resultConditon" />
		</view>
		<!-- <view class="split-line"></view> -->
		
		<!-- 商品列表 -->
		<view class="data-list">
			<view  v-for="(item, rowIndex) in datalist" :key="rowIndex">
				<view class="data-item" @click="goToDetail(item)">
					<img :src="item.image || defaultImage" class="data-image" @error="handleImageError(item)"/>
					<view class="data-info">
						<text class="data-name">{{ item.name }}</text>
						<text class="data-info-detail">来源: {{ sourceOpt[item.source] }}</text>
				<!-- 		<text class="data-info-detail">库存: {{ item.stock }}</text>
						<text class="data-info-detail">状态: {{ statusOpt[item.status] }}</text> -->
						<text class="data-info-detail">
							<text>库存:{{ item.stock }}</text>
							<text style="padding-left:20rpx">状态:{{ statusOpt[item.status] }}</text>
						</text>
					</view>
				</view>
				<view v-if="isEdit" class="data-item-btn">
					<button class="btn delete" @click="deleteObj(item)">删除</button>
					<button class="btn view" @click="goToDetail(item)">编辑</button>
					<!-- <button class="btn view" @click="showEditDialog(item)">出库</button> -->
				</view>
				<view v-else-if="isOrder" class="data-item-btn">
					<button class="btn view" @click="addToOrder(item)">添加</button>
					<!-- <button class="btn view" @click="showEditDialog(item)">出库</button> -->
				</view>
			</view>
		</view>
		
		<uni-section title="自定义用法" type="line">
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
				@buttonClick="buttonClick" />
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
				@buttonClick="buttonClick" style="margin-top: 20px;" />
		</uni-section>
				
		<!-- 修改数量的弹窗 -->
		<uni-popup ref="editPopup" type="dialog">
			<view class="out-popup">
				<view class="out-popup-title"> 商品出库 </view>
				<view class="out-popup-num">
					<text>会员ID：</text>
					<uni-input v-model="user_id"></uni-input>
				</view>
				<view class="out-popup-num">
					<text>出库数量：</text>
					<uni-number-box :min="0" :max="max" v-model="editQuantity" />
				</view>
				<view class="out-popup-btn">
					<button class="btn cancel" @click="cancelEdit()">取消</button>
					<button class="btn config" @click="confirmEdit()">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
	import filterData from '@/common/data/goods/goods_filter.js';
	import dataDictionary from '@/common/data/dataDictionary.js';
	export default {
		data() {
			return {
				color: '#4D7BFE',
				hasChoose: false,
				defaultValue: {},
				filterData: filterData,
				datalist: [],
				goodsOpt: dataDictionary.goods,
				sourceOpt: {},
				statusOpt: {},
				name: '',
				searchParam: {
					name: '',
					category: '',
					source: '',
					status: '',
				},
				defaultImage: '/static/no_image.png',
				isEdit:false,
				isOrder:false
			};
		},
		components: {
			fjjCondition,
		},
		computed: {

		},
		onLoad(option) {
			if(option && option.isOrder){
				this.isOrder = option.isOrder;
			}
			// 初始上商品详情里面的枚举值
			if (this.goodsOpt) {
				let sourceOpts = this.goodsOpt.source;
				for (let i = 0; i < sourceOpts.length; i++) {
					this.sourceOpt[sourceOpts[i].value] = sourceOpts[i].text;
				}

				let statusOpts = this.goodsOpt.status;
				for (let i = 0; i < statusOpts.length; i++) {
					this.statusOpt[statusOpts[i].value] = statusOpts[i].text;
				}
			}

			// 初始化过滤值
			this.initFilterData();
			this.onSearch();
		},

		onShow() {
			this.onSearch();
		},

		methods: {
			
			handleImageError(item) {
				item.image = this.defaultImage;
			},

			async initFilterData() {
				if (this.filterData && this.goodsOpt) {
					for (let i = 0; i < this.filterData.length; i++) {
						if (this.goodsOpt[this.filterData[i].key]) {
							this.filterData[i].detailList = this.goodsOpt[this.filterData[i].key];
						}
					}
				}
			},

			//筛选返回值
			resultConditon(obj) {
				this.$refs.condition.visibleDrawer = false;
				this.hasChoose = obj.hasChoose;
				console.log("===========obj", obj);
				this.searchParam.source = obj.result.source;
				this.searchParam.status = obj.result.status;
				this.searchParam.buyAt = obj.result.buyAt;
				this.onSearch();
			},
			orderbyChange(obj) {
				console.log("=======orderbyChange", 1);
				this.$refs.condition.visibleDrawer = true;
			},
			// 跳转到商品详情页
			goToDetail(item) {
				uni.navigateTo({
					url: `/pages/goods/good?id=${item.id}&formData=${JSON.stringify(item)}`,
				});
			},
			
			// /**
			//  * @param {Object} item
			//  * 显示出库弹框
			//  */
			// showEditDialog(item) {
			// 	// this.editQuantity = item.orderNum - item.outNum;
			// 	// this.max = this.editQuantity;
			// 	this.item = item;
			// 	this.$refs.editPopup.open();
			// },
			
			deleteObj(item){
				this.$api.goodsDelete(item.id).then(result => {
					// 失败进行的操作
					uni.showToast({
						title: "删除成功!",
						duration: 3000
					});
					this.onSearch();
					return;
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "删除失败!",
						duration: 3000
					});
					return;
				})
			},

			searchByName() {
				this.searchParam.name = this.name;
				this.onSearch();
			},
			async onSearch() {
				// 测试数据开始
				// this.datalist = uni.getStorageSync('goods') || [];
				// if (this.searchParam.name)
				// 	this.datalist = this.datalist.filter(item =>
				// 		item.name.toLowerCase().includes(this.searchParam.name.toLowerCase())
				// 	);

				// if (this.searchParam.source && this.searchParam.source.length > 0)
				// 	this.datalist = this.datalist.filter(item =>
				// 		this.searchParam.source.includes(item.source)
				// 	);
				// if (this.searchParam.category && this.searchParam.category.length > 0)
				// 	this.datalist = this.datalist.filter(item =>
				// 		this.searchParam.category.includes(item.category)
				// 	);
				// if (this.searchParam.status && this.searchParam.status.length > 0)
				// 	this.datalist = this.datalist.filter(item =>
				// 		this.searchParam.status.includes(item.status)
				// 	);
				// 测试数据结束

				// 暂时屏蔽，调试接口再打开
				this.$api.goodsList(this.searchParam).then(result => {
					this.datalist = result?result:[]
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "查询失败!",
						duration: 3000
					});
					return;
				})
			},
		},
	};
</script>

<style lang="less" scoped>
	@import url("@/common/css/list_new.less");
</style>